<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>aaa: {{ aaa.title }}</h2>
    <input ref="el" />
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="inputFocus">聚焦</button>

    <div>{{ count + 1 }}</div>
    <!-- <div>{{ object.id + 1 }}</div> -->
    <div>{{ id + 1 }}</div>
    <div>{{ object.id }}</div>

    <hr>
    <div>num：{{ num }}</div>
    <button @click="changeNum">修改num</button>
    <div>title：{{ title }}</div>
    <!-- <button @click="changeTitle">修改title</button> -->
  </div>
</template>

<script lang="ts" setup name="RefDemo">
import { ref, reactive, toRef, toRefs } from 'vue'

const name = ref('张三');
const person = reactive({ name: '李四', age: 18 });
const aaa = ref({
  title: 'vue3'
})
const el = ref<HTMLInputElement | null>(null);
function changeName() {
  name.value = 'zhang-san';
}
function changeAge() {
  person.age ++;
  aaa.value.title = 'vue3-ts'
}
function inputFocus() {
  el.value?.focus();
}

const count = ref(0);
const object = { id: ref(6) };
const { id } = object;

// 注意事项
// reactive() 的局限性
// 1.有限的值类型; 2.不能替换整个对象; 3.对解构操作不友好


// toRef 和 toRefs 就是用来创建响应式的引用的，主要用来取出响应式对象里的属性，解构出来的属性值依然是响应式属性
// 如果不用 toRef 或者 toRefs，直接解构会丢失响应式效果。

let info = reactive({
  num: 6,
  title: 'vue3',
})
// 这样解构会丢失响应式效果
let { num, title } = info;
// let num = toRef(info, 'num');
const changeNum = () => {
  num++
  // num.value ++;
}

// let { title } = toRefs(info);
// const changeTitle = () => {
//   title.value = 'vue3-ts';
// }
</script>